// 全局状态机：地图描点图层控制

import Vue from 'vue'

import Overlay from 'ol/Overlay'
import arrayUtil from './../../../utils/array'
import Select from 'ol/interaction/Select'
// 初始状态
const state = {
  selectObj: {},
  popup_coordinate: {},
  popup () {},
  overlay: {},
  selectedFeature: {},
  pointLayerArray: []
}

// getters
const getters = {
  // 通过要素获取图层
  getLayerByFeature: state => feature => {
    return state.selectObj.getLayer(feature)
  },
  // 获取覆盖层
  getOverlay: state => {
    return state.overlay
  },
  // 获取选中点携带的数据
  selectedFeatureValues: state => {
    return state.selectedFeature['values_']
  }
}

// 异步操作
const actions = {
  // 关闭地图弹出面板
  closeOLPopup: function ({ commit, state, dispatch, getters }, option) {
    state.selectObj.getFeatures().clear()
    dispatch('overlaySetPosition', undefined)
    if (state.selectedFeature.get) {
      state.selectedFeature.setStyle(state.selectedFeature.get('__featureStyle'))
    }
  },
  // 添加Select对象需要监听的图层
  addSelectListeningLayer ({ commit, state, dispatch, getters }, pointLayer) {
    state.pointLayerArray.push(pointLayer)
  },
  // 移除Select对象需要监听的图层
  removeSelectListeningLayer ({ commit, state, dispatch, getters }, pointLayer) {
    arrayUtil.delByVal(state.pointLayerArray, pointLayer)
  },
  // 注册选择监听对象
  registerSelectObj ({ commit, state, dispatch, getters }, {pointLayerArray, selectCallback}) {
    commit('setPointLayerArray', pointLayerArray)
    state.selectObj = new Select({
      style: function (feature, resolution) {
        let layer = getters.getLayerByFeature(state.selectedFeature)
        if (layer) {
          return layer.get('__featureStyle_H')(feature, resolution)
        }
      },
      layers: function (layer) {
        // _ol_array_.includes(state.pointLayerArray, layer)
        return state.pointLayerArray.includes(layer)
      }
    }) // ref to currently selected interaction
    dispatch('addInteraction', state.selectObj)
    // 监听地图单机事件
    dispatch('addMapEventListener', {
      name: 'singleclick',
      fun: function (evt) {
        // state.popup_coordinate = evt.coordinate
        // 调用关闭气泡
        dispatch('closeOLPopup', undefined)
      }
    })
    // 监听描点被选中的事件
    state.selectObj.on('select', function (e) {
      if (e.target.getFeatures().getLength() > 0) {
        dispatch('popup', {feature: e.selected[0], selectCallback})
      } else {
        dispatch('closeOLPopup', undefined)
      }
    })
    state.selectObj.setActive(true)
  },
  popup ({ commit, getters, state, dispatch }, {feature, selectCallback}) {
    dispatch('closeOLPopup', undefined)
    commit('setSelectedFeature', feature)
    let layer = getters.getLayerByFeature(feature)
    if (layer) {
      // 保存选中状态的额样式
      feature.set('__id', layer.get('__id'), false)
      // 保存选中状态的额样式
      feature.set('__layerGroupId', layer.get('__layerGroupId'), false)
      // 保存选中状态的额样式
      feature.set('__featureStyle', layer.get('__featureStyle'), false)
      // 保存选中状态的额样式
      feature.set('__featureStyle_H', layer.get('__featureStyle_H'), false)
    }
    feature.setStyle(feature.get('__featureStyle_H'))

    selectCallback(feature.get('__layerGroupId'), feature.get('__id'), feature.values_)

    let popupCoordinate = feature
      .getGeometry()
      .getCoordinates()
    let [LNG, LAT] = popupCoordinate
    state.overlay.setPosition(popupCoordinate)
    // var zoom = getters.getMapObj.getView().getZoom()
    // var myView = new View({
    //   center: [LNG + 4, LAT],
    //   zoom: zoom
    // })
    getters.getMapObj.getView().animate({
      zoom: 12,
      center: [LNG + 4000, LAT + 4000],
      duration: 700
    })
    // dispatch('setView', myView)
  },
  overlaySetPosition ({ commit, state }, position) {
    state.overlay.setPosition(position)
  },
  createPopup ({ commit, state }, popupContainer) {
    commit('createPopup', popupContainer)
  }
}

// 提交操作
const mutations = {
  registerSelectObj (state, payload) {
    state.selectObj = payload
  },
  popup (state, feature) {
    state.selectedFeature = feature
  },
  clasoPopup (state, payload) {
    let normalFeatureStyle = state.selectedFeature['$normalFeatureStyle']
    try {
      state.selectedFeature.setStyle(normalFeatureStyle)
    } catch (e) {
    }
  },
  createPopup (state, popupContainer) {
    Vue.set(state, 'overlay', new Overlay({
      element: popupContainer,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    }))
  },
  setSelectedFeature (state, selectedFeature) {
    state.selectedFeature = selectedFeature
  },
  setPointLayerArray (state, pointLayerArray) {
    state.pointLayerArray = pointLayerArray
  }
}
// 导出
export default {
  state,
  getters,
  actions,
  mutations
}
